<template>
  <div class="app-container">

    <el-dialog
      title="提示"
      :visible.sync="yanqibox"
      width="30%"
    >
      <div class="dataItem">
        <div v-for="(item,idx) in yqdata"
             style="padding:5px 0;font-weight: bolder;font-size:16px;border-bottom:1px solid #ddd; "
        >{{ item.title }}
        </div>
      </div>
      <div class="forms" style="background: #f6f5f6;padding:10px;margin:5px 0">
        <el-form ref="form" label-width="100px">
          <el-form-item label="过期截止时间" style="margin-top:20px;">
            <el-date-picker
              v-model="yqs.endtime"
              type="date"
              placeholder="选择过期截止时间"
            >
            </el-date-picker>
            <p style="color:#999;font-size:12px">选择59:59秒，程序会自动+1s</p>
          </el-form-item>
          <el-form-item label="延期理由">
            <el-input v-model="yqs.reason" type="textarea"></el-input>
          </el-form-item>
          <div>
            <el-button type="primary" @click="yanqiaction">确定</el-button>
          </div>
        </el-form>
      </div>

    </el-dialog>
    <Exceltpl ref="exceltpl"></Exceltpl>

    <div class="filter-container" v-if="baseData">
      <div>
        <el-cascader :options="baseData.ly" class="filter-item w-200" clearable filterable placeholder="选择领域"
                     :props="{ expandTrigger: 'hover' }" v-model="listQuery.c2"
        ></el-cascader>
        <el-select v-model="listQuery.type" class="filter-item w-200" placeholder="请选择类别" clearable>
          <el-option
            v-for="item in baseData.type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="listQuery.checktime"
          type="daterange"
          range-separator="至"
          class="filter-item"
          style="width:300px"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <!--        <el-cascader :options="baseData.leaderInfo" class="filter-item w-200" style="width:300px" clearable filterable-->
        <!--                     placeholder="选择责任人" :props="{ expandTrigger: 'hover', checkStrictly: true }" v-model="listQuery.leader"-->
        <!--        ></el-cascader>-->
        <el-select v-model="listQuery.leader" clearable class="filter-item w-200" placeholder="选择责任人">
          <el-option
            v-for="item in baseData.leaderInfo"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>


        <el-select v-model="listQuery.status" class="filter-item w-200" placeholder="请选择状态" clearable>
          <el-option
            v-for="item in baseData.statusAry"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select v-model="listQuery.evaluate_all" class="filter-item w-200" placeholder="评分筛选" clearable>
          <el-option
            v-for="item in [1,2,3,4,5,'>2','>3','>4','<=2']"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-select v-model="listQuery.come_from" class="filter-item w-200" placeholder="选择来源" clearable>
          <el-option
            v-for="item in come_from_ary"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div style="border-top:1px solid #eee;padding-top:10px;">
        <el-input
          v-model="listQuery.u_name"
          size="small"
          placeholder="请输入发帖用户名"
          clearable
          class="filter-item w-200"
        />
        <el-input
          v-model="listQuery.u_uid"
          size="small"
          placeholder="请输入发帖用户id"
          clearable
          class="filter-item w-200"
        />
        <el-input
          v-model="listQuery.r_name"
          size="small"
          placeholder="回复机构用户名，支持模糊搜索"
          clearable
          class="filter-item w-200"
        />
        <el-button-group class="filter-item">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="search"
          >
            搜索
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="refresh"
          >
            重置
          </el-button>
          <el-button
            size="small"
            type="success"
            icon="el-icon-receiving"
            @click="allcheck"
          >
            全选
          </el-button>
        </el-button-group>

        <!--          <div class="ball-box">-->
        <!--            <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">-->
        <!--              <div class="ball" v-if="ball.show">-->
        <!--                <div class="inner">-->
        <!--                  <i class="el-icon-circle-plus"></i>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </transition>-->
        <!--          </div>-->
        <el-badge :value="yqdata.length" class="filter-item">
          <el-button
            size="small"
            type="danger"
            icon="el-icon-receiving"
            @click="openck"
            style="float:right"
          >
            处理仓库
          </el-button>

        </el-badge>

      </div>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      height="100%"
      class="table-container"
      highlight-current-row
      @sort-change="sortChange"
    >

      <el-table-column
        width="80"
        label="wid"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.wid }}
        </template>
      </el-table-column>


      <el-table-column
        width="80"
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==7" type="warning">已受理</el-tag>
          <el-tag v-else-if="scope.row.status==2" type="info">待处理</el-tag>
          <el-tag v-else-if="scope.row.status==3 || scope.row.status==4 || scope.row.status==5" type="success">已办理
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        width="360"
        label="标题"
        align="left"
      >
        <template slot-scope="scope">
          <div style="color:#409EFF;font-size:14px;cursor: pointer" @click="openAction(scope.row.wid)">
            <a :href="`https://wz.mala.cn/wz/wzinfo?wid=${scope.row.wid}`" target="_blank">{{ scope.row.title }}</a>
          </div>
          <div style="display: flex;align-items: center">
            <div v-for="(item,idx) in scope.row.lingyu" class="titletag">
              {{ item }}
            </div>
          </div>
        </template>
      </el-table-column>


      <el-table-column
        width="180"
        label="负责人"
        align="center"
      >
        <template slot-scope="scope">
          <div style="font-size:12px">{{ scope.row.lid }}</div>
          <div v-if="scope.row.passon_name" class="cover"><p style="margin:0;padding:0">{{ scope.row.passon_time }}</p>
            <p style="margin:0;padding:0">@{{ scope.row.passon_name }}</p></div>
        </template>
      </el-table-column>

      <el-table-column
        width="135"
        label="发帖时间"
        align="center"
        prop="create_time"
      >
        <template slot-scope="scope">
          <div style="font-size:12px">{{ scope.row.create_time }}</div>
        </template>
      </el-table-column>
      <el-table-column
        width="135"
        label="截止时间"
        prop="endTime"
        align="center"
      >
        <template slot-scope="scope">
          <div style="font-size:12px">{{ scope.row.endTime }}</div>
        </template>
      </el-table-column>

      <el-table-column
        width="135"
        label="回复时间"
        align="center"
        prop="reply_time"
      >
        <template slot-scope="scope">
          <div style="font-size:12px">{{ scope.row.reply_time }}</div>
        </template>
      </el-table-column>

      <el-table-column
        width="135"
        label="一键延5天"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="quickendtime(scope.row.wid)"
          >
            一键延期
          </el-button>
        </template>
      </el-table-column>


      <el-table-column
        width="135"
        label="加入处理仓"
        align="center"
      >
        <template slot-scope="scope">
          <el-checkbox   v-model="scope.row.check" @change="pl($event,scope.row.wid)">批量</el-checkbox>
        </template>
      </el-table-column>

    </el-table>


    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />

  </div>

</template>
<style lang="less">
.ball-box {
  .ball {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    color: #f00;
    transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41);

    .inner {
      transition: all 1s linear;
    }
  }
}

.el-descriptions-item__content {
  font-size: 14px;
}

.el-drawer__body {
  &::-webkit-scrollbar {
    width: 5px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #999;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}
</style>
<style scoped lang="less">

.titletag {
  color: #fff;
  padding: 0 5px;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  border-radius: 3px;
  background: #409EFF;
  margin: 5px 5px 0 0;
}

.cover {
  font-size: 12px;
  color: #739099;
}

.reply-item {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;

  &.delete_item {
    color: #999;
    border-color: #ddd;
    background-color: #eee;

    .headerLine {
      border-bottom: 1px solid #ddd !important;
    }
  }

  .headerLine {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #c6e2ff;

    .actionButton {
      cursor: pointer;
    }
  }

  .reply-user {
    font-weight: bold;
    padding-bottom: 5px;
    display: flex;


    .user .delete {
      background: red;
      color: #fff;
      padding: 2px 5px;
      margin-right: 5px;
      border-radius: 5px;
    }

    .t {
      font-weight: normal;
      color: #999;
      margin-left: 30px;
    }
  }
}

.titleH {
  .title {
    color: #20a0ff;
    font-size: 22px;
    font-weight: bold;

    &:hover {
      color: #369;
    }
  }
}
</style>
<script>
import Exceltpl from '@/components/Exceltpl'
import Pagination from '@/components/Pagination'
import { getCQWzlist, getWzinfo, getWzParams, updateWzinfoEndtime, updateWzinfoParms } from '@/api/wz'
import { getPhone } from '@/api/user'

let id = 0
export default {
  components: {
    Pagination,
    Exceltpl
  },
  data() {
    return {
      yq: [],
      yqs: { reason: '', endtime: '' },
      checkYq: [],
      yqdata: [],
      actionform: [],
      activeNames: ['1', '2'],
      actionloading: false,
      actionData: [],
      action: false,
      total: 0,
      list: [],
      yanqibox: false,
      chulicangkuCount: 0,
      come_from_ary: [
        { label: 'PC', value: 1 },
        { label: '小程序', value: 2 },
        { label: 'WAP', value: 3 },
        { label: '征集', value: 4 },
        { label: '2025两会', value: 5 }
      ],
      drawer: true,
      formdata: [],
      checkLeaderData: [],
      checkLeader: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        c2: '',                    //领域
        type: '',                  //类别
        checktime: [new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('fr-CA'), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0, 23, 59, 59).toLocaleDateString('fr-CA')],
        leader: '',                //领导
        status: '',                 //状态
        keyword: '',                //标题
        phone: '',                  //手机
        wid: '',                    //wid
        u_name: '',               //用户名
        r_name: '',               //回复人
        u_uid: '',                 //id
        evaluate_all: '',
        come_from: '',
        orderFiled: '',
        orderType: ''
      },
      baseData: [],
      ball: {
        show: false, //是否显示小球
        el: '' //获取小球的dom
      },
      allcheckStatus:false,
      dialogVisible: false,
      dialogType: 'create',
      loading: false,
      value_loading: {
        endTime: false,
        is_zhanshi: false,
        status: false,
        export_status: false,
        myd_status: false,
        bkj_status: false
      }
    }
  },
  created() {
    this.WzParams()
    let uid = this.$route.query.uid
    if (uid) {
      this.listQuery.u_uid = uid
      this.fetchData()
    } else {
      this.fetchData()
    }

  },
  methods: {
    pl(bool,wid) {
      let dataBool = JSON.parse(JSON.stringify(this.list))
      dataBool.map(item => {
        if(item.wid===wid) {
          item.check = bool
        }
        return item
      })
      dataBool = dataBool.filter(item => item.check === true)
      this.yqdata = dataBool
    },
    openck() {
      this.yanqibox = true
      this.yqs = { reason: '', endtime: '' }
    },
    allcheck(){
      this.list.forEach(item => { item.check = this.allcheckStatus?false:true })
      this.allcheckStatus = this.allcheckStatus?false:true
      let checkList  = this.list.filter(item => item.check === true);
      this.yqdata = checkList
    },
    yanqiaction() {
      updateWzinfoEndtime({
        wid: this.yqdata.map(item=>{return item.wid}),
        data: this.yqs,
        pl: 1
      }).then(r => {
        this.$message({
          message: '延期完成',
          type: 'success'
        })
        this.yqdata = []
        this.yq = []
        this.yanqibox = false
        this.fetchData()
      }, data => {
      })
    },
    // toCart(event) {
    //   // 显示小球
    //   this.ball.show = true;
    //   // 获取点击元素
    //   this.ball.el = event.target;
    // },
    // beforeEnter(el) {
    //   // 让小球移动到点击的位置，获取点击位置
    //   // let inner = el.querySelector(".clck");
    //   let dom = this.ball.el;
    //   let clck = this.$refs.clck;
    //   let rect = dom.getBoundingClientRect(); // 获取点击dom位置
    //   let x = rect.left - clck.getBoundingClientRect().left;
    //   let y = (rect.top-clck.getBoundingClientRect().top);
    //   el.style.display = "block";
    //   el.style.transform = `translate3d(0,${y}px,0)`;
    //   let inner = el.querySelector(".inner");
    //   inner.style.transform = `translate3d(${x}px,0,0)`;
    //
    // },
    // enter(el, done) {
    //   // 触发重绘
    //   document.body.offsetHeight;
    //   // 小球回家
    //   let clck = this.$refs.clck;
    //   let clckleft = -(clck.getBoundingClientRect().left)
    //   let clcktop = clck.getBoundingClientRect().top
    //   el.style.transform = `translate3d(0,0,0)`;
    //   // let inner = el.querySelector(".inner");
    //   // inner.style.transform = `translate3d(0,${clcktop}px,0)`;
    //   // 过渡完成后执行的事件
    //   el.addEventListener("transitionend", done);
    // },
    // afterEnter(el) {
    //   // 隐藏小球
    //   this.ball.show = false;
    //   el.style.display = "none";
    // },
    lookPhone(type, id, key) {
      getPhone({ type: type, id: id }).then(r => {
        this.$set(this.actionData, 'phone', r.data)
      })
    },
    explortExcel() {
      this.$refs.exceltpl.explortExcel()
    },
    quickendtime(wid) {
      updateWzinfoEndtime({
        wid: wid
      }).then(r => {
        this.$message({
          message: '延期完成',
          type: 'success'
        })
        this.fetchData()
      }, data => {
      })
    },
    updateParms(filed) {

      if (filed == 'status' || filed == 'is_zhanshi' || filed == 'bkj_status') {
        this.$confirm('此操作需要二次确认', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.value_loading[`${filed}`] = true
          updateWzinfoParms({
            action: 'filed',
            wid: this.actionData.wid,
            key: filed,
            value: this.actionform[`${filed}`]
          }).then(r => {
            this.value_loading[`${filed}`] = false
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.fetchData()
          }, data => {
            // this.value_loadingm[`${filed}`] = false
          })
        }).catch(() => {
          if (filed == 'status') {
            this.actionform[`${filed}`] = '' + this.actionData[`${filed}`]
          } else if (filed == 'is_zhanshi') {
            this.actionform[`${filed}`] = this.actionData[`${filed}`] == 2 ? true : false
          } else {
            this.actionform[`${filed}`] = this.actionData[`${filed}`] == 1 ? true : false
          }
          console.log(this.actionData[`${filed}`])
        })
      } else {
        this.value_loading[`${filed}`] = true
        updateWzinfoParms({
          action: 'filed',
          wid: this.actionData.wid,
          key: filed,
          value: this.actionform[`${filed}`]
        }).then(r => {
          this.$message({
            message: '更新成功',
            type: 'success'
          })
          this.value_loading[`${filed}`] = false
          // this.fetchData()
        }, data => {
          this.value_loading[`${filed}`] = false
        })
      }

    },
    delReply(reply_id, type, wid) {
      this.actionloading = true
      updateWzinfoParms({ action: 'reply_action', type: type, wid: wid, reply_id: reply_id }).then(r => {
        this.openAction(wid)
      })
    },
    search() {
      this.yq = []
      this.yqdata = []
      this.yq = []
      this.fetchData()

    },
    openAction(wid) {
      this.action = true
      this.actionData = []
      this.actionloading = true
      if (!isNaN(wid)) {
        getWzinfo({ wid: wid }).then(response => {
          this.actionData = response.data
          this.actionloading = false
          this.actionform = {
            status: '' + response.data.status + '',
            is_zhanshi: response.data.is_zhanshi,
            export_status: response.data.export_status > 0 ? true : false,
            type: response.data.type,
            classify1: response.data.classify1,
            classify2: response.data.classify2,
            is_index: response.data.is_index > 0 ? true : false,
            myd_status: response.data.myd_status > 0 ? true : false,
            bkj_status: response.data.bkj_status > 0 ? true : false,
            endTime: response.data.endTime,
            endTime_2: response.data.endTime_2,
            endTime_reason: response.data.endTime_reason
          }
        })
      } else {
        this.$message({
          message: '识别出错，请点击右侧操作按钮',
          type: 'error'
        })
        return false
      }
    },
    goWid(wid) {
      this.$router.push({ path: '/wz/action', query: { wid: wid } })
    },
    refresh() {
      this.listQuery = {
        page: 1,
        limit: 20
      }
      localStorage.setItem('wzbaseData', '')
      this.fetchData()
      this.WzParams()
    },
    WzParams() {
      let baseData = localStorage.getItem('wzbaseData')
      if (!baseData) {
        getWzParams().then(response => {
          this.baseData = response.data
          localStorage.setItem('wzbaseData', JSON.stringify(this.baseData))
        })
      } else {
        this.baseData = JSON.parse(baseData)
      }
    },
    sortChange(column) {
      this.$set(this.listQuery, 'orderType', column.order)
      this.$set(this.listQuery, 'orderFiled', column.prop)
      // console.log(column.order)
      this.fetchData(column)
    },
    fetchData(column) {
      this.listLoading = true
      // if (column) {
      //   this.listQuery.orderFiled = column.prop
      //   this.listQuery.orderType = column.order
      // }
      getCQWzlist(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
        if (this.listQuery.u_uid) {
          this.listQuery.u_name = response.data.data[0].u_name
        }
      })
      this.checkYq = this.checkYq.map(v => false)

    },
    submit() {

    }
  }
}
</script>
